<template>
        <el-dialog
         title="功能授权"
          :visible.sync="RoleDialogVisible"
           size="tiny" 
          :lock-scroll='false'
          top='3vh'
          >
    
    
            <div class='dialog-body'>
              <el-checkbox-group v-model="checkList" class='checkbox-group' @change='handleChecked'>
                <div v-for='k in res.list'>
                    <el-checkbox :label='k.name'></el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
    
    
            <span slot="footer" class="dialog-footer">
    
    
                <el-button type="primary" @click="save">保存</el-button>


                <el-button @click="changeVisible">取消</el-button>
    

            </span>
    
        </el-dialog>
</template>

<script>
import Vue from "vue";
import { Checkbox, CheckboxGroup, Button, Dialog } from "element-ui";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Button);
Vue.use(Dialog);
import URL from "@/common/js/adminUrl";

export default {
  mounted () {
    Bus.$on("角色授权", data => (this.RoleDialogVisible = data.role));
    Bus.$on("userId", data => (this.userId = data));
  },

  watch: {
    RoleDialogVisible (newValue, oldValue) {
      if (newValue && !oldValue) {
        this.Axios
          .Post(URL.role.url + "?userId=" + this.userId, {})
          .then(res => {
            this.res = res.data.datas;
            this.checkList = [];
            this.res.list.forEach((ele, i) => {
              if (this.res.list[i].status == 1) {
                this.checkList[i] = this.res.list[i].name;
              }
            });
          });
      }
    }
  },

  data () {
    return {
      RoleDialogVisible: false,
      res: "",
      checkList: [],
      checkListId: [],
      checkedFlag: false,
      userId: ""

    };
  },

  methods: {
    save () {


      if (!this.checkedFlag) {

        this.checkListId = [];

        for (let i = 0; i < this.checkList.length; i++) {
          for (let k = 0; k < this.res.list.length; k++) {
            if (this.checkList[i] == this.res.list[k].name) {
              this.checkListId.push(this.res.list[k].id)
            }
          }
        }

        let params = {
          userId: this.userId,
          roleIds: this.checkListId
        };
        this.Axios.Post(URL.saveRoleAuth.url, params).then(res => {

          res.data.message == '保存成功' ? Bus.$emit('roleSave', '保存成功') : this.cancel()

        });
      }

      this.changeVisible();
    },
    handleChecked (checkList) {
      // 判断用户有没有修改打钩的状况 如果没有  不发送请求
      let arr = [];
      this.res.list.forEach((ele, i) => {
        if (this.res.list[i].status == 1) {
          arr.push(this.res.list[i].name);
        }
      }, this);

      this.checkedFlag = arr.sort().toString() == checkList.sort().toString();
    },

    changeVisible () {
      Bus.$emit('roleSave', '')
      this.RoleDialogVisible = false;
      //    Bus.$emit('角色授权',this.RoleDialogVisible)
    },

    cancel () {
      Bus.$emit('roleSave', '')
    }
  }
};
</script>

<style scoped>
.checkbox-group div {
  margin-bottom: 10px;
}
.dialog-body {
  max-height: 350px;
  overflow: auto;
}
::-webkit-scrollbar {
  width: 0px;
}
</style>